<template>
	<div class="navList">
		<div class="list" v-for="(item, index) in getNavList" :key="item.id">
			<p :class="$route.name === item.url ? 'active' : ''" @click="routerLink(item)">{{ item.title }}</p>
			<transition name="fade">
				<div :style="{height: item.submenu * 36+'px'}" class="submenu" v-show="$route.name === item.url">
					<p v-for="(ele, i) in item.submenu" :key="i">{{ ele }}</p>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
	name: 'navList',
	components: {},
	data() {
		return {};
	},
	watch: {},
	computed: {
		...mapGetters({
			getNavList: 'getNavList'
		})
	},
	created() {

	},
	mounted() {

	},
	methods: {
		routerLink(item) {
			this.$emit('routerLink', item)
		}
	}
};
</script>

<style lang="scss" scoped>
.navList {
  .list {
    > p {
      height: 40px;
      line-height: 40px;
      text-indent: 36px;
      cursor: pointer;
      font-size: 18px;
    }

    .submenu {
      overflow: hidden;

      p {
        text-indent: 54px;
        height: 36px;
        line-height: 36px;
      }
    }

    .fade-enter-active, .fade-leave-active {
      transition: all .5s ease;
    }

    .fade-enter, .fade-leave-to {
      height: 0 !important;
    }

    .active {
      color: #60609c;
    }
  }
}
</style>